/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, LineColumn, InputLine, TextArea, Input, Select, Button, Layer, SuffixInput, BlobInputList, InputDatalist, CheckSwitch, Popover, PopoverRefer,
    IconChevronDown, PopoverContent, PopoverDescription, MenuList, MenuItem, PopoverClose, IconX, useToast,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, useItemInputControl,
} from "../common/base";
import {useMeasureInpFilter} from "../common/hooks";
import queryString from "query-string";

export const 等级评定选=['1级','2级','3级','4级'];
export const 工作介质选=['蒸汽','导热油'];
interface Props  extends InternalItemProps{
    label?: string;
    titles?: any[];
}
export const itemA下结论=['问题及处','安全评定','检验结论','结论压力','结论温度','结论介质','结论其它','检验日期','检验日期1','新下检日','结论说明','新下年检日'];
/**通用见证材料3项的： 约定：children [] 可以嵌入俩个儿子DOM节点，分别代表两个段落插入一个div块;
 * */
export const ConclusionMVS=
React.forwardRef((
    { children, show ,alone=true,redId,nestMd,label,titles}:Props,  ref
) => {
    const [getInpFilter]=useMeasureInpFilter(null,itemA下结论,);
    const {inp, setInp} = useItemInputControl({ ref });
    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">问题 及其处理：</Text>
        <TextArea value={inp?.问题及处 || ''} rows={8}
                  onChange={e => setInp({...inp, 问题及处: e.currentTarget.value || undefined})}/>
        <hr/>
        <Text variant="h5">检验结论-检查结论{'>>'}</Text>
        <InputLine  label='安全状况等级评定为' >
            <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                 value={ inp?.安全评定  ||''} onChange={e => setInp({ ...inp, 安全评定: e.currentTarget.value||undefined}) }>
                <option></option>
                <option>1级</option>
                <option>2级</option>
                <option>3级</option>
                <option>4级</option>
                <option>5级</option>
            </Select>
        </InputLine>
        <InputLine  label='检查结论' >
            <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                 value={ inp?.检验结论  ||''} onChange={e => setInp({ ...inp, 检验结论: e.currentTarget.value||undefined}) }>
                <option></option>
                <option>符合要求</option>
                <option>基本符合要求</option>
                <option>不符合要求</option>
            </Select>
        </InputLine>
        允许使用参数：
        <LineColumn column={4}>
            <InputLine  label='压力' >
                <SuffixInput  value={inp?.结论压力 ||''}
                              onChange={e=>setInp({ ...inp, 结论压力: e.currentTarget.value||undefined})}>MPa</SuffixInput>
            </InputLine>
            <InputLine  label='温度' >
                <SuffixInput  value={inp?.结论温度 ||''}
                              onChange={e=>setInp({ ...inp, 结论温度: e.currentTarget.value||undefined})}>℃</SuffixInput>
            </InputLine>
            <InputLine  label='介质'>
                <InputDatalist value={inp?.结论介质 ||''}  datalist={工作介质选}
                      onListChange={v => setInp({ ...inp, 结论介质: v||undefined})} />
            </InputLine>
            <InputLine  label='其它' >
                <BlobInputList  value={inp?.结论其它 ||''} rows={4} onListChange={v => setInp({...inp,结论其它:v || undefined}) }/>
            </InputLine>
            <InputLine label='设置检验日期'>
                <Input value={inp?.检验日期 || ''} type='date'
                       onChange={e => setInp({...inp, 检验日期: e.currentTarget.value})}/>
            </InputLine>
            <InputLine  label='检验起始日期' >
                <Input  value={inp?.检验日期1 ||''}  type='date'
                        onChange={e => setInp({ ...inp, 检验日期1: e.currentTarget.value}) } />
            </InputLine>
            <InputLine  label='下次全面检验日期' >
                <Input  value={inp?.新下检日 ||''}  type='date'
                        onChange={e => setInp({ ...inp, 新下检日: e.currentTarget.value}) } />
            </InputLine>
            <InputLine  label='下次年度检验日期' >
                <Input  value={inp?.新下年检日 ||''}  type='date'
                        onChange={e => setInp({ ...inp, 新下年检日: e.currentTarget.value}) } />
            </InputLine>
        </LineColumn>
        说明:
        <TextArea  value={inp?.结论说明 ||''} rows={10}
                   onChange={e => setInp({ ...inp, 结论说明: e.currentTarget.value||undefined}) } />
    </InspectRecordLayout>;
});

/**@property na : =true表示不在结论附录当中出现的吗，但都出现在目录中的。
 * @property ml : 该分项在目录中的文本显示题目。 若是太长的文本标题
 * @property do : 默认有做
 * @property ha : 路由标签 HASH
 * 报告中实际打印顺序看代码：  来自原平台 testlogcfg.ses文件 的"contlist":[]列出全部可能分项，"allpage":[]不含公用分项的。  而"mainpage":[ ]扣除"addpage":[]后的是固定的必须展示。
 * */
export const VsProjects默认=[
    {name:'移动式压力容器全面检验结论报告',do:true,ha:'Conclusion'},
    {name:'移动式压力容器资料审查报告',do:true,ha:'MaterialReview'},
    {name:'容器全面检验报告附页',ml:'移动式压力容器全面检验报告附页', ha:'Structural'},
    {name:'壁厚测定报告',ha:'rp_thickm_'},
    {name:'壁厚校核报告',ha:''},
    {name:'射线检测报告',ha:'rp_radio_'},
    {name:'超声波检测报告',ha:'rp_sonic_'},
    {name:'磁粉检测报告',ha:'rp_magnetic_'},
    {name:'渗透检测报告',ha:'rp_permeation_'},
    {name:'光谱分析报告',ha:'rp_spectrVs_'},
    {name:'硬度检测报告',ha:'rp_hardness_'},
    {name:'金相分析报告',ha:''},
    {name:'安全附件检验报告',ha:'SafetyAccesor'},
    {name:'安全阀校验报告',ha:''},
    {name:'耐压试验报告',ha:'rp_magnetic_'},
    {name:'气密性试验报告',ha:'rp_gasproof_'},
    {name:'附加检验报告',ha:'AdditionalTest'},
];

//仅仅页面上用的路由hash字段 "ha": 不需要存储数据库给报告的。
const VsProjects_configPure=VsProjects默认.map(one=>{ const { ha, ...other}=one;
    return {...other} } );

//项目列表：
export const ProjectListMVS=
    React.forwardRef((
        { children, show ,alone=true,label}:Props,  ref
    ) => {
        const toast = useToast();
        const getInpFilter = React.useCallback((par: any) => {
            //初始化的 Projects=空 -> 缺省值:要求挑选的大项目; 怎能增加，不允许删除和修改默认项目名字。
            const {Projects =VsProjects_configPure } =par||{};
            return {Projects};
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        const qs= queryString.parse(window.location.search);
        // console.log("向目标表点击切换的 graphql入口from=" , qs?.from??'不晓得');
        const [viewHas, setViewHas] = React.useState<boolean>(false);
        const [seq, setSeq] = React.useState<number | null>(Number(qs?.from));   //表對象的當前一條。
        const [obj, setObj] = React.useState<any>();        //Projects数组的各个对象
        // React.useEffect(() => {
        //     let size =inp?.Projects?.length;
        //     setSeq(size>0?  size-1:null);    //导致初始化显示最后一个seq
        // }, [inp]);
        React.useEffect(() => {
            let size = inp?.Projects?.length;
            let ifrom = Number(qs?.from);
            if (ifrom >= 0 && ifrom < size) {
                setSeq(ifrom);    //导致初始化显示最后一个seq
                setObj(inp?.Projects?.[ifrom]);
            } else {
                setSeq(null);
                setObj(null);
            }
        }, [qs?.from ]);
        //这上面副作用：,inp?.Projects不能随意增加 依赖项哦，也不能用[qs])替代，qs会导致点击修改菜单后也会重复刷新的。【不要加】inp?.Projects依赖项，导致尾部插入的会跳到qs?.from那一条显示，不合理。
        function onModifySeq(idx:number,it:any){
            setObj(it);
            setSeq(idx);
        };
        function onDeleteSeq(idx:number,it:any){
            let fixSize =VsProjects默认.length;
            if(idx<fixSize)  return;  //不允许删除
            inp?.Projects?.splice(idx,1);
            setInp({...inp,Projects: [...inp?.Projects] });
            setSeq(null);
        };
        function onInsertSeq(idx:number,it:any){
            let fixSize =VsProjects默认.length;
            if(idx<fixSize)  return;    //不允许从默认项目列表中间插入自定义的东西
            inp?.Projects?.splice(idx,0, obj);
            setInp({...inp,Projects:[...inp?.Projects] });
            setSeq(idx);
        };
        function onAddSeq(idx:number){
            let size =inp?.Projects?.push(obj);
            setInp( (inp?.Projects&&{...inp,Projects:[...inp?.Projects] } )  || {...inp,Projects:[obj] } );
            //应该跳到最后一条：不能停留倒数第二条 当前from 当前按钮那条；
            setSeq((inp?.Projects&&(size-1))  || 0 );
        };
        const clearProjectCatalog = React.useCallback(() => {
            setInp({...inp, Projects:undefined });
            toast({title: "目录表被清空", subtitle: "需要重新设置!", intent: "warning"});
        }, [inp,setInp,toast]);
        //本对象组件：是共享的，状态交互注意。
        const editor=(fixed: boolean, tail: boolean) => <Layer elevation={"sm"} css={{ padding: '0.25rem' }}>
            <div>
                <InputLine label={`有做该项目吗:`}>
                    <CheckSwitch  checked= {obj?.do || false}
                                  onChange={e =>setObj({...obj, do: (obj?.do? undefined:true)} ) } />
                </InputLine>
                <InputLine label={`检验项目:`}>
                    <Input   value={obj?.name ||''}  disabled={fixed}
                             onChange={e =>setObj({...obj, name: e.currentTarget.value} ) } />
                </InputLine>
                { !obj?.na && <>
                    <InputLine label={`检验结果`}>
                        <Input   value={obj?.res ||''}
                                 onChange={e =>setObj({...obj, res: e.currentTarget.value} ) } />
                    </InputLine>
                    <InputLine label={'安全状况等级'}>
                        <InputDatalist value={obj?.sl ||''} datalist={等级评定选}
                                       onListChange={v =>setObj({...obj, sl: v||undefined} ) } />
                    </InputLine>
                    <InputLine label={`附页、附图`}>
                        <Input   value={obj?.apx ||''}
                                 onChange={e =>setObj({...obj, apx: e.currentTarget.value} ) } />
                    </InputLine>
                    </>
                }
                目录页显示的自定义部分：
                <InputLine label={`页号`}>
                    <Input   value={obj?.page ||''}
                             onChange={e =>setObj({...obj, page: e.currentTarget.value} ) } />
                </InputLine>
                <Button onPress={() => {
                    if(seq !== null) {
                        inp?.Projects?.splice(seq, 1, obj);
                        setInp({ ...inp, Projects: [...inp?.Projects] });
                    }
                    else setInp({ ...inp, Projects: [...inp?.Projects ,obj] });
                } }
                >{tail? `新增一条` : `改一条就确认`}</Button>
            </div>
        </Layer>;
        //项目明细编辑器的显示：依赖Projects数组索引i来判定的。页面上名义的顺序序号不等于这个的，要转换？链接生成时刻就要敲定了。新增加的又删除导致序号跳变?【默认】项目不允许删除而且在前面。
        const myTable=<div>
            {inp?.Projects?.map((a:any,i:number)=>{
                if((viewHas && a?.do) || !viewHas)
                    return <React.Fragment  key={i}>
                        <div>{`${i+1}`}
                            <Popover>
                                <PopoverRefer>
                                    <Button  size="md" iconAfter={<IconChevronDown />} variant="ghost" css={{whiteSpace:'unset'}}>
                                        {`${a?.name||'？'} [${a?.do? '有做':'没做'}] `}
                                    </Button>
                                </PopoverRefer>
                                <PopoverContent>
                                    <PopoverDescription>
                                        <MenuList>
                                            <MenuItem onPress={()=>onModifySeq(i,a)}>修改</MenuItem>
                                            <MenuItem onPress={()=>onDeleteSeq(i,a)}>刪除这条</MenuItem>
                                            <MenuItem onPress={()=>onInsertSeq(i,a)}>插入一条</MenuItem>
                                            <MenuItem onPress={()=>onAddSeq(i)}>末尾新增一条</MenuItem>
                                        </MenuList>
                                    </PopoverDescription>
                                    <PopoverClose>
                                        <IconX/>
                                    </PopoverClose>
                                </PopoverContent>
                            </Popover>
                        </div>
                        {i===seq && editor(i<VsProjects默认.length, false) }
                    </React.Fragment>;
                else return null;
            }) }
        </div>;
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'承压类检验报告附页-包括的项目（分项）'} column={0}>
                <Text  variant="h5">
                 {label}-包括的项目：
                </Text>
                <Button intent='primary' onPress={() => setViewHas(!viewHas)}
                >{viewHas? `显示全部项目`: `仅显示有做的项目`}</Button>
                默认项目表的部分不能删除，不能改名字;
                <hr/>
                {myTable}
                { seq===null && editor(false, true) }
                <Text  variant="h5">
                有些是不在附页中体现的但却在目录中有的其页号需设定。
                </Text>
                想清空所有项目（分项）和目录的配置（谨慎使用！）：
                <Button intent='danger' onPress={() => {
                    clearProjectCatalog();
                }}>重新初始化</Button>
            </InspectRecordLayout>
        );
    } );

